/*
 * @Author: your name
 * @Date: 2020-04-24 11:45:55
 * @LastEditTime: 2020-04-26 15:44:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \odoc\components\odocWorkflowDialog\odocTypeChange.js
 */
import React, { Component } from 'react';
import { toJS } from 'mobx';
import { observer, inject } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Tools, Button, List, ActivityIndicator, Modal } from 'weaver-mobile';
import { Form, ListPage, RouteLayout } from 'weaver-mobile-page';
const getLabel = Tools.getLabel;
const Normal = ListPage.Normal;

@inject('odocTypeChangeStore', "odocComsStore")
@withRouter
@observer
export default class odocTypeChangeCom extends Component {
  prefixCls = 'odoc-typechange'

  componentDidMount() {
    // var tabBar = document.getElementsByClassName("am-tab-bar")[0];
    // tabBar && tabBar.parentNode && tabBar.parentNode.removeChild(tabBar);
    // document.getElementById("odocTypeChange").style.height = window.innerHeight+"px";

    const { getContent, setProperty } = this.props.odocTypeChangeStore;
    const {odocComsStore} = this.props;

    let {requestParam = {}} = odocComsStore;
    requestParam = toJS(requestParam);
    let {requestid,workflowid,f_weaver_belongto_userid,f_weaver_belongto_usertype} = requestParam;
    setProperty({
      workflowId:workflowid || '368166',
      requestId:requestid || '15499929',
      f_weaver_belongto_userid:f_weaver_belongto_userid,
      f_weaver_belongto_usertype:f_weaver_belongto_usertype
    });
    getContent();
  }

  //取消
  onCancel=()=> {
    const {odocComsStore, odocTypeChangeStore } = this.props;
    const {onClose} = odocComsStore;
    window.historyRoute.go(-1);
    odocTypeChangeStore.closeModal();
    onClose && typeof onClose == "function" && onClose();
  }

  componentWillUnmount() {
    const { odocTypeChangeStore } = this.props;
    odocTypeChangeStore.emptyComStatus();
  }

  render() {
    const { odocTypeChangeStore } = this.props;
    const { changeForm, list, tableTitle, formLayout, handleSubmit, loading,
     clickTable, messageModal, msgContent } = odocTypeChangeStore;
    const template = {
      default: [
        {
          key: 'col1',
          configs: [
            {
              key: 'col1_row1',
              configs: [
                {
                  key: 'chanRequestIdspan',
                  style: { fontSize: '13px',fontWeight: 400 }
                },
              ],
            },
            {
              key: 'col1_row2',
              configs: [
                {
                  key: 'chanWorkflowIdspan',
                  style: { fontSize: '12px' }
                },
              ],
            },
            {
              key: 'col1_row3',
              configs: [
                {
                  key: 'chanUseridspan',
                  style: { fontSize: '12px' },
                },
                {
                  key: 'chanDatespan',
                  style: { paddingLeft: '15px', fontSize: '12px' },
                },
              ],
            },
          ],
        },
      ],
    };
    return (
      <div id='odocTypeChange' className='odocTypeChange' >
        <div className='content'>
          <Form store={changeForm} />
          <div className='table'>
            <div className='tableTitle' >{tableTitle}</div>
            <Normal
              template={template}
              store={list}
              onRowClick={this.onRowClick}
              customHeight="100%"
            />
            <ActivityIndicator
              toast
              text="Loading..."
              animating={clickTable || loading}
            />
          </div>
        </div>
        <div className='bottomBtn'>
        <Button className='btn' type="primary" disabled={loading} onClick={()=>{handleSubmit(this.onCancel)}}>{getLabel('519017', '提交变更')}</Button>
        <Button className='btn' type="" disabled={loading} onClick={this.onCancel}>{getLabel('519132', '取消变更')}</Button>
        </div>
        <Route
          key={formLayout.id}
          path={formLayout.path}
          render={() => (
            <RouteLayout>
              <div
                key="wmPoutePageDemo"
                className="wm-route-layout wm-demo-route-layout-page"
              >
                <Form>
                  <List>
                    {this.getFields()}
                  </List>
                </Form>
              </div>
            </RouteLayout>
          )}
        />
        <Modal
          visible={messageModal}
          transparent
          maskClosable={false}
          title={msgContent}
          footer={[{ text: getLabel('826','确定'), onPress: () => { this.onCancel() } }]}
        ></Modal>
      </div>
    );
  }

  getFields = () => {
    const { revisionForm } = this.props.odocTypeChangeStore;
    const { conditioninfo, isInit } = revisionForm;
    const fields = [];
    if (isInit) {
      conditioninfo.forEach((group) => {
        group.items.forEach((field) => {
          if (field.domkey[0] == "docTypeChangeWorkflow" || field.domkey[0] == "docTypeChangeHrm") {
            fields.push(<Form.Item
              key={field.domkey.join('__')}
              form={revisionForm}
              fieldConfig={field}
              prefixCls='color'
              disabled
            />);
          } else {
            fields.push(<Form.Item
              key={field.domkey.join('__')}
              form={revisionForm}
              fieldConfig={field}
              disabled
            />);
          }
        });
      });
    }
    return fields;
  }
  onRowClick = (rowData) => {
    const { history, odocTypeChangeStore } = this.props;
    const { getFormContent } = odocTypeChangeStore;
    getFormContent(rowData.id, history);
  }

}